<template>
	<div>
		<el-row>
			<el-col :span="9">
				<el-row>
					<el-form :inline="true" :model="leftSearchForm" label-width="40px" style="margin-left: 30px; margin-top: 20px; width: 100%; float: left">
						<el-form-item label="名称" style="width: 150px">
							<el-input v-model="leftSearchForm.name" size="small"></el-input>
						</el-form-item>
						<el-form-item label="编号" style="width: 150px">
							<el-input v-model="leftSearchForm.code" size="small"></el-input>
						</el-form-item>
						<el-form-item label="状态" style="width: 150px">
							<el-select v-model="leftSearchForm.disabled" size="small">
								<el-option label="启用" value="1"></el-option>
								<el-option label="禁用" value="2"></el-option>
							</el-select>
						</el-form-item>
						<el-form-item style="width: 50px">
							<el-button type="primary" size="small" @click="leftQuery">查询</el-button>
						</el-form-item>
						<el-form-item style="width: 50px">
							<el-button type="primary" size="small" @click="leftAdd">新增</el-button>
						</el-form-item>
					</el-form>
				</el-row>
				<el-row>
					<el-table size="small" :data="leftTableData" border style="margin-left: 20px" @row-click="leftRowClick">
						<el-table-column prop="name" label="字典名称" align="center" width="180"></el-table-column>
						<el-table-column prop="code" label="字典编码" align="center"></el-table-column>
						<el-table-column prop="disabled" label="是否启用" align="center">
							<template slot-scope="scope">
								<span v-if="scope.row.disabled == '1'">启用</span>
								<span v-if="scope.row.disabled == '2'">禁用</span>
							</template>
						</el-table-column>
						<el-table-column prop="sort" label="排序号" align="center" width="60"></el-table-column>
						<el-table-column label="操作" width="120" align="center">
							<template slot-scope="scope">
								<el-button type="text" size="small" @click="editDict(scope.row)">编辑</el-button>
								<el-button type="text" size="small" @click="removeDict(scope.row.id)">删除</el-button>
							</template>
						</el-table-column>
					</el-table>
					<el-pagination
						style="margin-top: 10px"
						background
						:page-sizes="[1, 10, 20, 50, 100, 200]"
						:page-size="leftPageData.pageSize"
						layout="prev, pager, next,sizes"
						@size-change="leftSizeChange"
						@current-change="leftCurrentChange"
						:current-page="leftPageData.pageNum"
						:total="leftPageData.total"
					></el-pagination>
				</el-row>
			</el-col>
			<el-col :span="14" style="margin-left: 30px">
				<el-row>
					<el-form :inline="true" :model="rightSearchForm" label-width="60px" style="margin-left: 30px; margin-top: 20px; width: 100%">
						<el-form-item label="字典项" style="width: 200px">
							<el-input v-model="rightSearchForm.name" size="small"></el-input>
						</el-form-item>
						<el-form-item label="字典值" style="width: 200px">
							<el-input v-model="rightSearchForm.value" size="small"></el-input>
						</el-form-item>
						<el-form-item label="状态" style="width: 200px">
							<el-select v-model="rightSearchForm.disabled" size="small">
								<el-option label="启用" value="1"></el-option>
								<el-option label="禁用" value="2"></el-option>
							</el-select>
						</el-form-item>
						<el-form-item style="width: 60px; margin-left: 20px">
							<el-button type="primary" size="small" @click="leftRowClick">查询</el-button>
						</el-form-item>
						<el-form-item style="width: 60px; margin-left: 10px">
							<el-button type="primary" size="small" @click="rightAdd">新增</el-button>
						</el-form-item>
						<el-form-item style="width: 100px; margin-left: 10px">
							<el-button type="primary" size="small" @click="refreshCache">刷新缓存</el-button>
						</el-form-item>
					</el-form>
				</el-row>
				<el-row>
					<el-table size="small" :data="rightTableData" border style="margin-left: 20px">
						<el-table-column prop="name" label="字典项" align="center"></el-table-column>
						<el-table-column prop="value" label="字典值" align="center"></el-table-column>
						<el-table-column prop="disabled" label="是否启用" align="center">
							<template slot-scope="scope">
								<span v-if="scope.row.disabled == '1'">启用</span>
								<span v-if="scope.row.disabled == '2'">禁用</span>
							</template>
						</el-table-column>
						<el-table-column prop="remarks" label="备注" align="center"></el-table-column>
						<el-table-column prop="sort" label="排序号" align="center"></el-table-column>
						<el-table-column label="操作" width="120" align="center">
							<template slot-scope="scope">
								<el-button type="text" size="small" @click="editDictDetail(scope.row)">编辑</el-button>
								<el-button type="text" size="small" @click="removeDictDetail(scope.row.id)">删除</el-button>
							</template>
						</el-table-column>
					</el-table>
					<el-pagination
						style="margin-top: 10px"
						background
						:page-sizes="[1, 10, 20, 50, 100, 200]"
						:page-size="rightPageData.pageSize"
						layout="prev, pager, next,sizes"
						@size-change="rightSizeChange"
						@current-change="rightCurrentChange"
						:current-page="rightPageData.pageNum"
						:total="rightPageData.total"
					></el-pagination>
				</el-row>
			</el-col>
		</el-row>
		<el-dialog :title="leftDialogText" :close-on-click-modal="false" :visible.sync="leftDialog" width="500px" @close="leftDialogCancel">
			<el-form ref="leftDialogForm" :model="leftDialogForm" :rules="leftRules" label-width="80px">
				<el-form-item label="字典名称" prop="name">
					<el-input v-model="leftDialogForm.name"></el-input>
				</el-form-item>
				<el-form-item label="字典编号" prop="code">
					<el-input v-model="leftDialogForm.code"></el-input>
				</el-form-item>
				<el-form-item label="字典状态">
					<el-select v-model="leftDialogForm.disabled">
						<el-option label="启用" value="1"></el-option>
						<el-option label="禁用" value="2"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="排序号">
					<el-input-number v-model="leftDialogForm.sort"></el-input-number>
				</el-form-item>
				<el-form-item label="备注">
					<el-input type="textarea" v-model="leftDialogForm.remarks"></el-input>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="leftDialogCancel">取 消</el-button>
				<el-button type="primary" @click="leftDialogSubmit">确 定</el-button>
			</span>
		</el-dialog>
		<el-dialog :title="rightDialogText" :close-on-click-modal="false" :visible.sync="rightDialog" width="500px" @close="rightDialogCancel">
			<el-form ref="rightDialogForm" :model="rightDialogForm" :rules="rightRules" label-width="80px">
				<el-form-item label="字典项" prop="name">
					<el-input v-model="rightDialogForm.name"></el-input>
				</el-form-item>
				<el-form-item label="字典值" prop="value">
					<el-input v-model="rightDialogForm.value"></el-input>
				</el-form-item>
				<el-form-item label="状态">
					<el-select v-model="rightDialogForm.disabled">
						<el-option label="启用" value="1"></el-option>
						<el-option label="禁用" value="2"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="排序号">
					<el-input-number v-model="rightDialogForm.sort"></el-input-number>
				</el-form-item>
				<el-form-item label="备注">
					<el-input type="textarea" v-model="rightDialogForm.remarks"></el-input>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="rightDialogCancel">取 消</el-button>
				<el-button type="primary" @click="rightDialogSubmit">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>
<script>
import { dictList, addDict, editDict, removeDict, dictDetailList, addDictDetail, editDictDetail, removeDictDetail } from '@/api/system/dict';
export default {
	data() {
		return {
			leftSearchForm: {},
			leftTableData: [],
			leftDialogText: '新增字典',
			leftDialog: false,
			leftMode: 'add',
			leftDialogForm: {
				name: '',
				code: '',
				disabled: '1',
				sort: '1',
				remarks: ''
			},
			leftRules: {
				name: [{ required: true, message: '请输入字典名称', trigger: 'blur' }],
				code: [{ required: true, message: '请输入字典编号', trigger: 'blur' }]
			},
			leftPageData: {
				pageNum: 1,
				pageSize: 20,
				total: 0
			},

			rightSearchForm: {},
			rightTableData: [],
			rightDialogText: '新增字典明细',
			rightDialog: false,
			rightMode: 'add',
			rightDialogForm: {
				name: '',
				value: '',
				disabled: '1',
				sort: '1',
				remarks: ''
			},
			rightRules: {
				name: [{ required: true, message: '请输入字典项', trigger: 'blur' }],
				value: [{ required: true, message: '请输入字典值', trigger: 'blur' }]
			},
			rightPageData: {
				pageNum: 1,
				pageSize: 10,
				total: 0
			}
		};
	},
	mounted() {
		this.leftQuery();
	},
	methods: {
		refreshCache() {
			this.$confirm('确认要刷新缓存吗?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				this.$store.dispatch('user/refresh').then(() => {
					this.$message({ type: 'success', message: '刷新成功' });
				});
			});
		},
		rightSizeChange(value) {
			this.rightPageData.pageSize = value;
			this.leftRowClick();
		},
		rightCurrentChange(value) {
			this.rightPageData.pageNum = value;
			this.leftRowClick();
		},
		rightAdd() {
			if (!this.selectedRow) {
				this.$message({ type: 'error', message: '请选择左侧字典项' });
				return false;
			}
			this.rightDialogForm.id = null;
			this.rightDialogForm.sort = 1;
			this.rightDialogForm.dictId = this.selectedRow.id;
			this.rightDialogForm.updateDate = null;
			this.rightDialogForm.updateId = null;
			this.rightDialogText = '新增字典明细';
			this.rightDialog = true;
			this.rightMode = 'add';
		},
		editDictDetail(item) {
			this.rightDialogText = '编辑字典明细';
			this.rightDialog = true;
			this.rightMode = 'edit';
			this.$nextTick(() => {
				Object.assign(this.rightDialogForm, item);
			});
		},
		removeDictDetail(id) {
			this.$confirm('确认要删除这条数据吗?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				removeDictDetail(id).then(() => {
					this.$message({ message: '删除成功', type: 'success' });
					this.leftRowClick();
				});
			});
		},
		rightDialogCancel() {
			this.rightDialog = false;
			this.$refs['rightDialogForm'].resetFields();
		},
		rightDialogSubmit() {
			this.$refs['rightDialogForm'].validate((valid) => {
				if (valid) {
					if (this.rightMode == 'add') {
						addDictDetail(this.rightDialogForm).then(() => {
							this.rightDialog = false;
							this.$message({ message: '新增字典明细成功', type: 'success' });
							this.$refs['rightDialogForm'].resetFields();
							this.leftRowClick();
						});
					} else if (this.rightMode == 'edit') {
						editDictDetail(this.rightDialogForm).then(() => {
							this.rightDialog = false;
							this.$message({ message: '编辑字典明细成功', type: 'success' });
							this.$refs['rightDialogForm'].resetFields();
							this.leftRowClick();
						});
					}
				}
			});
		},
		leftRowClick(row) {
			if (row && row.id) {
				this.selectedRow = row;
			}
			if ((row && row.id) || this.selectedRow) {
				let tempObj = {};
				Object.assign(tempObj, this.rightSearchForm);
				tempObj.pageNum = this.leftPageData.pageNum;
				tempObj.pageSize = this.leftPageData.pageSize;
				tempObj.dict_id = row && row.id ? row.id : this.selectedRow.id;
				dictDetailList(tempObj).then((res) => {
					this.rightTableData = res.rows;
					this.rightPageData.total = res.total;
				});
			} else {
				this.$message({ type: 'warning', message: '请选择左侧字典' });
			}
		},
		leftDialogCancel() {
			this.leftDialog = false;
			this.$refs['leftDialogForm'].resetFields();
		},
		leftDialogSubmit() {
			this.$refs['leftDialogForm'].validate((valid) => {
				if (valid) {
					if (this.leftMode == 'add') {
						addDict(this.leftDialogForm).then(() => {
							this.leftDialog = false;
							this.$message({ message: '新增字典成功', type: 'success' });
							this.$refs['leftDialogForm'].resetFields();
							this.leftQuery();
						});
					} else if (this.leftMode == 'edit') {
						editDict(this.leftDialogForm).then(() => {
							this.leftDialog = false;
							this.$message({ message: '编辑字典成功', type: 'success' });
							this.$refs['leftDialogForm'].resetFields();
							this.leftQuery();
						});
					}
				}
			});
		},
		leftQuery() {
			let tempObj = {};
			Object.assign(tempObj, this.leftSearchForm);
			tempObj.pageNum = this.leftPageData.pageNum;
			tempObj.pageSize = this.leftPageData.pageSize;
			dictList(tempObj).then((res) => {
				this.leftTableData = res.rows;
				this.leftPageData.total = res.total;
			});
		},
		leftSizeChange(value) {
			this.leftPageData.pageSize = value;
			this.leftQuery();
		},
		leftCurrentChange(value) {
			this.leftPageData.pageNum = value;
			this.leftQuery();
		},
		leftAdd() {
			this.leftDialogForm.id = null;
			this.leftDialogForm.sort = 1;
			this.leftDialogForm.updateDate = null;
			this.leftDialogForm.updateId = null;
			this.leftDialogText = '新增字典';
			this.leftDialog = true;
			this.leftMode = 'add';
		},
		editDict(item) {
			this.leftDialogText = '编辑字典';
			this.leftDialog = true;
			this.leftMode = 'edit';
			this.$nextTick(() => {
				Object.assign(this.leftDialogForm, item);
			});
		},
		removeDict(id) {
			this.$confirm('确认要删除这条数据吗?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				removeDict(id).then(() => {
					this.$message({ message: '删除成功', type: 'success' });
					this.leftQuery();
				});
			});
		}
	}
};
</script>
<style>
.el-form--inline .el-form-item__content {
	width: 110px !important;
}
</style>
